<script lang="ts" setup>

import { eventdata } from '@/assets/eventdata';
import { useRouter } from 'vue-router';
const router = useRouter()

const Learnmore = (item: { id: number }) => {
  // 跳转传递值
  router.push(`/waterfall${item.id}`)
  console.log(item, '点击的值')
}
</script>

<template>
  <!-- autoplay -->
  <a-carousel dotsClass="my-dots-class" autoplay effect="fade" :autoplaySpeed="1500">
    <div v-for="item in eventdata" :key="item.id">
      <div class="school">
        <div class="school-introduce">
          <h1 class="school-introduce-title">{{ item.title }}</h1>
          <p class="school-introduce-content">{{ item.content }}</p>
          <div style="width: 55%; text-align: right">
            <a-button type="primary" size="large" @click="Learnmore(item)" class="school-introduce-button">
              了解更多
            </a-button>
          </div>
        </div>
        <div class="school-positioning">
          <div v-for="(image, index) in item.images" :key="index"
            :class="`school-positioning-${['one', 'two', 'three', 'four'][index]}`">
            <img :src="image" alt="" class="school-positioning-one-img" />
          </div>
        </div>
      </div>
    </div>
  </a-carousel>
</template>

<style scoped lang="scss">
.school {
  display: flex;
  width: 100%;
  height: 550px;
  background-color: white;
  justify-content: space-around;

  &-introduce {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 50%;

    // 标题
    &-title {
      width: 70%;
      font-size: 40px;
    }

    // 简介
    &-content {
      width: 60%;
      font-size: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      overflow: hidden;
    }

    // 按钮
    &-button {
      border-radius: 5px;
      padding: 0 30px;
    }
  }

  &-positioning {
    width: 40%;
    position: relative;

    // 第一张
    &-one {
      position: absolute;
      left: 10%;
      top: 10%;
      width: 300px;
      height: 180px;

      &-img {
        width: 100%;
        height: 100%;
      }
    }

    &-two {
      position: absolute;
      left: 35%;
      top: 15%;
      z-index: 999;
      width: 300px;
      height: 180px;

      &-img {
        width: 100%;
        height: 100%;
      }
    }

    &-three {
      position: absolute;
      left: 25%;
      top: 35%;
      width: 280px;
      height: 180px;
      z-index: 888;

      &-img {
        width: 100%;
        height: 100%;
      }
    }

    &-four {
      position: absolute;
      left: 5%;
      top: 50%;
      width: 300px;
      height: 180px;
      z-index: 999;

      &-img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

/* For demo */
:deep(.slick-slide) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

:deep(.slick-slide h3) {
  color: #fff;
}

// 指示点颜色
:deep.ant-carousel .slick-dots li {
  background-color: black;
  width: 30px;
}

// 选中指示点颜色
:deep.ant-carousel .slick-dots li.slick-active button {
  background-color: #1677ff;
}


// 设置选中项样式
// :deep.ant-carousel .slick-dots li button::after {
//   background-color: rgb(0, 0, 0); // 选中点的背景色
// }</style>
